import React, { Component } from 'react'
import axios from 'axios'
export default class MovieList extends Component {
 constructor(){
    super()
    this.state={
        movieList:[]
    }
 }
    /**
     * componentWillReceiveProps这个方法已经被废弃掉了，该方法是一个不安全的方法，如果在使用过程中直接使用就会在
     * 浏览器的控制台有警告信息，要求我们必须将该钩子方法改成UNSAFE_componentWillReceiveProps，该方法是运行在render之前的
     * 一旦父组件的props发生变化之后，子组件中的该方法就会被触发，在这个方法中如何得到父组件传递进来的数据
     * 在该方法中通过this.props获取的props的数据是父组件中未修改之前的，属于旧值
     * 
     */
  UNSAFE_componentWillReceiveProps(nextProps,nextState){
    console.log('------componentWillReceiveProps-----------',nextProps);
    if(this.props.type===nextProps.type){
        return;
    }
    switch(nextProps.type){
        case 1:
            axios.get('https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getHotMovies').then(res=>{
                console.log('正在热映',res.data.movies);
                this.setState({
                    movieList:res.data.movies
                })
            })
            break
        case 2:
            axios.get('https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getUpCommingMovies').then(res=>{
                console.log('即将热映',res.data.movies);
                this.setState({
                    movieList:res.data.movies
                })
            })
            break;
    }   
    
  }
//   shouldComponentUpdate(nextProps,nextState){
//     console.log('---------shouldComponentUpdate-------------');
//     console.log('nextProps',nextProps);
//     console.log('this.Props',this.props);
//     return true
//   }
  render() {
    console.log('-------子组件的render-------------------------------');
    return (
      <div>
        <ul>
            {
                this.state.movieList.length>0&&this.state.movieList.map(item=><li key={item.id}>
                        {item.title}
                </li>)
            }
         </ul>
      </div>
    )
  }
}
